<!-- 弹窗 详情 -->
<script lang="ts" setup>
import type { FormInstance, FormRules } from 'element-plus';

import { RESCUE_TYPE_OPTIONS } from '@/config/enum-map';
import type { components } from '@/genapi/wh';
import { whManagerBsTbAccidentSaveOrUpdateUsingPost } from '@/genapi/wh';
import { useAsync } from '@/hooks/use-async';
import { useCompanyStore } from '@/stores/company';

import { injectState } from '../state';

defineOptions({ name: 'DetailDialog' });

const companyStore = useCompanyStore();

const { page } = injectState()!;

const dialogRef = shallowRef<InstanceType<GlobalComponents['PromiseDialog']>>();
const formRef = shallowRef<FormInstance>();

const dialogType = ref<'add' | 'edit' | 'detail' | string>();

const titleMap: Record<string, string> = {
  add: '新增事故事件',
  edit: '编辑事故事件',
  detail: '事故事件详情',
};

const beforeClose = async () => {
  if (dialogType.value !== 'detail') {
    await ElMessageBox.confirm('确认关闭？');
  }
};

const trigger = async (type = 'add', value = {} as any) => {
  dialogType.value = type;
  model.value = JSON.parse(JSON.stringify(value)) as any;
  await dialogRef.value?.open();
};

defineExpose({
  trigger,
});

const model = ref<components['schemas']['TbAccidentSaveOrUpdateDTO']>({} as any);

const rules: FormRules<typeof model.value> = {
  xxx: { required: true, message: '企业名称不可为空', trigger: 'blur' },
};

const { execute, isLoading } = useAsync(async () => {
  await formRef.value?.validate();
  await ElMessageBox.confirm('确认提交？', '提示', {
    type: 'warning',
  });
  await whManagerBsTbAccidentSaveOrUpdateUsingPost({
    data: {
      ...model.value,
      enterpriseId: companyStore.currentCompanyId,
    },
  });
  ElMessage.success('提交成功');
  page.execute();
  dialogRef.value?.complete();
});
</script>

<template>
  <PromiseDialog
    ref="dialogRef"
    :title="titleMap[dialogType!]"
    :before-close="beforeClose"
    max-h="884px!"
    w="707px!"
  >
    <el-scrollbar>
      <el-form
        ref="formRef"
        :disabled="dialogType === 'detail'"
        :model="model"
        :rules="rules"
        inline
        label-position="top"
        class="gap-x-55px grid! grid-cols-2!"
      >
        <el-form-item label="事故类型" prop="type">
          <el-select-v2
            v-model="model['type']"
            :options="RESCUE_TYPE_OPTIONS"
            placeholder="请输入事故类型"
            clearable
          />
        </el-form-item>
        <el-form-item label="发生时间" prop="happenTime">
          <el-date-picker
            v-model="model['happenTime']"
            type="datetime"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="请输入发生时间"
            clearable
            class="w-100%!"
          />
        </el-form-item>
        <el-form-item label="事故地点" prop="address">
          <el-input v-model="model['address']" placeholder="请输入事故地点" clearable />
        </el-form-item>
        <el-form-item label="损失金额" prop="lossAmount">
          <el-input v-model="model['lossAmount']" placeholder="请输入损失金额" clearable />
        </el-form-item>
        <el-form-item label="受伤人数" prop="injuryNum">
          <el-input v-model="model['injuryNum']" placeholder="请输入受伤人数" clearable />
        </el-form-item>
        <el-form-item label="死亡人数" prop="deadNum">
          <el-input v-model="model['deadNum']" placeholder="请输入死亡人数" clearable />
        </el-form-item>
        <el-form-item label="事故描述" prop="description" grid="col-span-2">
          <el-input
            v-model="model['description']"
            type="textarea"
            :rows="3"
            clearable
            placeholder="事故发生经过，事故原因分析等"
          />
        </el-form-item>
        <el-form-item label="应急响应与救援情况" prop="rescueDesc" grid="col-span-2">
          <el-input
            v-model="model['rescueDesc']"
            clearable
            :rows="3"
            type="textarea"
            placeholder="事故发生时采取的应急措施和救援行动，包括启动应急预案、组织人员疏散、进行灭火或泄漏控制等"
          />
        </el-form-item>
        <el-form-item label="附件信息" prop="附件信息">
          <FileUpload v-model="model['']" class="w-100%!" />
        </el-form-item>
      </el-form>
    </el-scrollbar>
    <template v-if="dialogType !== 'detail'" #footer>
      <el-button @click="dialogRef?.close()">取消</el-button>
      <el-button type="primary" :is-loading="isLoading" @click="execute()">确认</el-button>
    </template>
  </PromiseDialog>
</template>
